<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/WeixinSource/trunk/Public/Css/bootstrap.min.css" rel="stylesheet">
<link href="/WeixinSource/trunk/Public/Css/custom.css" rel="stylesheet"/>
<link rel="stylesheet" href="/WeixinSource/trunk/Public/Css/font-awesome.css">
<link rel="stylesheet" href="/WeixinSource/trunk/Public/Css/font-awesome.min.css" >
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="/WeixinSource/trunk/Public/Js/custom.js"></script>
    <title>账号绑定</title>
</head>
<body>

<div class="container">
    <style>
    .top {
        background-color: #0087CF;
        color: white;
        padding-top: 10px;
        font-size: 20px;
        height: 50px;
    }


</style>
<div class="row top">
    <div class="col-xs-1" id="back" style="padding-right: 50px;">
        <img src="/WeixinSource/trunk/Public/Images/back-white.png">
    </div>
    <div class="col-xs-8" align="center">
        <span>账号绑定</span>
    </div>
</div>
<script>
    $("#back").bind({
        'click' :function(){
            window.history.go(-1);
        }
    });
</script>
    <?php if(empty($relevanceModel)): ?><div class="row" style="margin-top: 50px;">
            <div class="col-xs-12 col-sm-12 col-mg-12 col-md-12" style="font-size: medium;" align="center">
                您尚未绑定任何水费账号
            </div>
        </div>
        <div class="row" style="margin-top: 20px;">

            <div><input type="button" class="btn btn-lg btn-block"
                        style="background-color: #6bd1a2;color:white;height: 46px;"
                        onclick="onBind() " value="立即绑定"/>
            </div>
            <?php else: ?>

            <div class="row" style="margin:10px;">

                <div><input type="button" class="btn btn-lg btn-block"
                            style="background-color: #6bd1a2;color:white;height: 46px;"
                            onclick="onBind() " value="新增账号"/>
                </div>

            </div>
            <style>
    .bar {
        background-color: #3399ff;
        font-size: medium;
        color: white;
        padding:10px 0px 10px 15px;
    }
</style>

<div class="row" style="margin-top: 10px;margin-bottom: 10px;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 bar">
        已绑定的账号
    </div>
</div>

            <?php if(is_array($relevanceModel)): foreach($relevanceModel as $key=>$relevance): ?><div class="row" style="border-bottom: darkgray solid 1px;padding-bottom: 5px;margin-bottom: 10px;"
                     id="<?php echo ($relevance["id"]); ?>-container">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="row" style="margin-top: 5px;">
                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 align-to-input" style="font-size: medium"
                                 align="left">
                                水费账号
                            </div>
                            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                <input type="text" value="<?php echo ($relevance["userid"]); ?>" readonly>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 5px;">
                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 align-to-input" align="left"
                                 style="font-size: medium">
                                姓名
                            </div>
                            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                <input type="text" value="<?php echo ($relevance["name"]); ?>" readonly>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 5px;">
                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 align-to-input" align="left"
                                 style="font-size: medium">
                                证件号
                            </div>
                            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                <input type="text" value="<?php echo ($relevance["idnumber"]); ?>" readonly>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px">
                            <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12">
                                <input type="button" class="btn btn-lg btn-block jss-button"style="background-color: firebrick"
                                            onclick="onDelete('<?php echo ($relevance["id"]); ?>') " value="删除"/>
                            </div>
                        </div>
                    </div>
                </div><?php endforeach; endif; endif; ?>
    <style>
    .progress {
        width: 100px;
        height: 90px;
        position: fixed;
        color:white;
        background-color: #000000;
        border-radius: 10px;
        Alpha(Opacity = 50);
        -moz-opacity: 0.5;
        opacity: 0.5;
        text-align: center;
        vertical-align: middle;
        line-height: 90px;
        display: none;
    }
    .wrapper{
        position: fixed;
        background-color: #000000;
        Alpha(Opacity = 30);
        -moz-opacity: 0.3;
        opacity: 0.3;
        display: none;
    }
</style>
<!--提示信息-->
<div class="progress" id="progress">
    <span style="color:white;font-size: larger;" id="progress-hint">正在删除...</span>
</div>
<!--wrapper-->
<div class="wrapper" id="wrapper">
</div>

<script>
    //定位progress于屏幕中央
    var progressHeight = $("#progress").css('height');
    progressHeight = parseInt(progressHeight.substring(0, progressHeight.indexOf("px", 0)));
    var progressWidth = $("#progress").css('width');
    progressWidth = parseInt(progressWidth.substring(0, progressWidth.indexOf("px", 0)));
    var viewPortWidth = window.innerWidth;//视口宽
    var viewPortHeight = window.innerHeight;//视口高
    var translateX = (viewPortWidth - progressWidth) / 2;
    var translateY = (viewPortHeight - progressHeight) / 2;
    $("#progress").css('left', translateX);
    $("#progress").css('top', translateY);


    //定位wrapper充斥整个屏幕
    $("#wrapper").css('width',viewPortWidth);
    $("#wrapper").css('height',viewPortHeight);
    $("#wrapper").css('left',0);
    $("#wrapper").css('top',0);


    var worker = null;

    function showProgress() {
        $("#progress").fadeIn('fast');
        $("#wrapper").fadeIn('fast');
        worker = setInterval(changeProgWord(),100);
    }
    function hideProgress() {
        $("#progress").fadeOut('fast');
        $("#wrapper").fadeOut('fast');
        clearInterval(worker);
    }

    function changeProgWord(){
        if($("#progress-hint").html() == '请等待...'){
            $("#progress-hint").html('请等待..');
        }
        if($("#progress-hint").html() == '请等待..'){
            $("#progress-hint").html('请等待...');
        }
    }
</script>

    
<style>
    .message{
        width: 100px;
        height: 90px;
        position: fixed;
        color:white;
        background-color: #000000;
        border-radius: 10px;
        Alpha(Opacity = 30);
        -moz-opacity: 0.3;
        opacity: 0.3;
        text-align: center;
        vertical-align: middle;
        line-height: 90px;
        display:none;
    }
</style>

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 message" id="message">
    </div>
</div>

<script>
    //定位message于屏幕中央
    var messageHeight = $("#message").css('height');
    messageHeight = parseInt(messageHeight.substring(0, messageHeight.indexOf("px", 0)));
    var messageWidth = $("#message").css('width');
    messageWidth = parseInt(messageWidth.substring(0, messageWidth.indexOf("px", 0)));
    var viewPortWidth = window.innerWidth;//视口宽
    var viewPortHeight = window.innerHeight;//视口高
    var translateX = (viewPortWidth - messageWidth) / 2;
    var translateY = (viewPortHeight - messageHeight) / 2;
    $("#message").css('left', translateX);
    $("#message").css('top', translateY);

    /**
     * @param messageText 提示信息
     * @param miliseconds 持续毫秒
     */
    function showMessage(messageText,miliseconds){
        $("#message").html(messageText);
        $("#message").fadeIn("fast");
        setTimeout(function(){
            $("#message").fadeOut("fast");
        },miliseconds);
    }
</script>
</div>

<script>
    //删除
    function onDelete(id) {
        if (!confirm("确定删除该账号?")) {
            return;
        }
        showProgress();
        var param = {
            id: id
        };
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: "<?php echo U('Bind/delete');?>",
            data: param,
            contentType: "application/x-www-form-urlencoded;charset=utf-8",
            success: function (json) {
                hideProgress();
                if (json.status == 'success') {
                    showMessage(json.msg, 2000);
                    //todo 隐藏元素
                    $("#" + id + "-container").css("display", "none");
                } else {
                    alert(json.msg);
                }
            },
            error: function (msg) {
                hideProgress();
                alert("删除失败,请检查网络!");
            }
        })
    }

    //点击绑定
    function onBind() {
        window.location.href = "<?php echo U('Bind/add');?>";
    }
</script>
</body>
</html>